import { memo, useState } from 'react'
import { View } from '@tarojs/components'
import { connect } from 'react-redux'
import { getDefaultTasks } from '@/api'
import { useDidShow } from '@tarojs/taro'
import { Login } from '@/components'
import './index.scss'

const Home = ({ userInfo }) => {
  const [tasks, setTask] = useState([])
  useDidShow(async () => {
    if (userInfo) {

    } else {
      const newTasks = await getDefaultTasks()
      setTask(newTasks)
    }
  })
  const handleClickLesson = async (lesson) => {
    console.log(lesson, 'lesson')
  }
  return (
    <View className='home'>
      <Login />
      <View className='task_wrapper'>
        {
          tasks.map((task) => {
            return (
              <View className='task' key={task}>
                {
                  task.lessons.map((lesson) => {
                    return (
                      <View className='lesson' key={lesson} onClick={() => handleClickLesson(lesson)}>{lesson.name}</View>
                    )
                  })
                }
              </View>
            )
          })
        }
      </View>
    </View>
  )
}
const mapStateToProps = ({ user }) => ({
  userInfo: user.userInfo
});

export default connect(mapStateToProps)(memo(Home))
